<template>
  <view>
    <view class="coupon" @tap="saveReceiveCoupon">
      <image :src="src" class="coupon-img" :style="{ height: ctnHeight }"></image>
      <view class="coupon-content" :style="{ minHeight: ctnHeight }">
        <view class="coupon-content-left">
          <view class="coupon-content-left-discount numberFont" style="color: #ffffff">
            <text v-if="coupon.type == 1" class="fs-16">¥</text>
            {{ getMoney(coupon) }}
          </view>
          <view class="coupon-content-left-fullMoney">满{{ coupon.fullMoney }}可用</view>
        </view>
        <view class="coupon-content-right">
          <!-- 普通页面 -->
          <template v-if="!pageName">
            <view class="coupon-content-right-store">
              <view :class="['scope', `scope-${coupon.sendType}`]">{{ coupon.sendTypeName }}</view>
              <view class="name">{{ coupon.name }}</view>
            </view>
            <view class="mb-2">券编码：{{ coupon.code }}</view>
            <view class="coupon-content-right-time">使用时间：</view>
            <view class="mb-2">{{ `${coupon.beginTime} 至 ${coupon.endTime}` }}</view>
            <view v-if="pageType * 1 !== 1" class="coupon-content-right-more mb-2" @click.stop="showMore">
              详细信息
              <van-icon name="arrow-down" custom-style="margin-left:8rpx" />
            </view>
            <view class="coupon-content-right-btn" v-if="coupon.status <= 20 && showBtn" @click.stop="fToUse">去使用</view>
            <!-- 已使用 -->
            <image v-if="coupon.status === 30" class="tags" mode="aspectFit" src="https://staticcdn.youliao.com/static/image/www_m/mall/done.png"></image>
            <!-- 已失效 -->
            <image v-if="coupon.status === 40" class="tags" mode="aspectFit" src="https://staticcdn.youliao.com/static/image/www_m/mall/invalid.png"></image>
          </template>
          <!-- 领券中心 -->
          <view v-else-if="pageName === 'couponCenter'">
            <view class="coupon-content-right-store">
              <view :class="['scope', `scope-${coupon.sendType}`]">{{ coupon.sendTypeName }}</view>
              <view v-if="timeObj" class="count-down">
                {{ timeObj.text }}
                <text class="c-red">{{ timeObj.days || "00" }}天{{ timeObj.hours || "00" }}:{{ timeObj.minutes || "00" }}:{{ timeObj.seconds || "00" }}</text>
              </view>
            </view>
            <view class="fs-12 ellipsis mr-10" v-if="coupon.creatorCompanyName">{{ coupon.creatorCompanyName }}</view>
            <view class="coupon-content-right-store mt-5">{{ coupon.name }}</view>
            <view class="c-grey mt-7 fs-12" style="width: 100%; display: flex">
              <view v-for="(i, index) in couponTypeMap[coupon.goodsScope].label2" :key="index" style="display: inline-flex; align-items: center; margin-right: 4rpx" @tap.stop="open(coupon, 1)">
                [
                <text>{{ `${i.text}` }}</text>
                <x-image width="28rpx" height="28rpx" src="https://staticcdn.youliao.com/static/image/www_pc/goods/coupon/infor.svg" v-if="i.id === 1" style="display: inline-flex"></x-image>
                ]
              </view>
              <view @tap.stop="open(coupon, 2)" style="display: inline-flex; align-items: center" v-if="coupon.useLimitType === 1">
                [
                <text>{{ `限张数` }}</text>
                <x-image width="28rpx" height="28rpx" src="https://staticcdn.youliao.com/static/image/www_pc/goods/coupon/infor.svg" style="display: inline-flex"></x-image>
                ]
              </view>
            </view>
            <view
              class="flex"
              :class="{
                'coupon-content-right-btn centerPage': true,
                use: ![1, 4].includes(coupon.userCouponStatus),
                disabled: [4].includes(coupon.userCouponStatus),
              }"
              v-if="coupon.userCouponStatus != 3"
            >
              {{ coupon.userCouponStatusName }}
            </view>
            <!-- 已领券、已抢完 -->
            <image v-if="statusList[coupon.couponStatus]" class="tags" mode="aspectFit" :src="statusList[coupon.couponStatus]"></image>
          </view>

          <template v-else-if="pageName === 'goodsDetail'">
            <view class="coupon-content-right-store mt-10">
              <view :class="['scope', `scope-${coupon.sendType}`]">{{ coupon.sendTypeName }}</view>
              <view class="name">{{ coupon.name }}</view>
            </view>
            <view class="coupon-content-right-time mt-16">活动时间：</view>
            <view class="mb-2">{{ `${coupon.beginTime} 至 ${coupon.endTime}` }}</view>
            <view :class="['coupon-content-right-btn', { use: coupon.userCouponStatus != 1 }]" v-if="coupon.userCouponStatus != 3">
              {{ coupon.userCouponStatusName }}
            </view>
            <view class="coupon-content-right-more mb-2" @click.stop="showMore">
              适用规格
              <van-icon name="arrow-down" custom-style="margin-left:8rpx" />
            </view>
            <!-- 已领券、已抢完 -->
            <image v-if="statusList[coupon.couponStatus]" class="tags" mode="aspectFit" :src="statusList[coupon.couponStatus]"></image>
          </template>
        </view>
      </view>
      <view class="coupon-footer" v-if="!pageName && pageType * 1 !== 1 && showFooter">
        <view class="mb-8">
          限店铺：{{ couponTypeMap[coupon.goodsScope].label[0] || "" }}
          <text v-if="coupon.useLimitType === 1">，每店铺可用{{ coupon.useLimitTypeCount }}张</text>
        </view>
        <view class="mb-8">限商品：{{ couponTypeMap[coupon.goodsScope].label[1] || "" }}</view>
        <view class="mb-8">使用说明：{{ coupon.description || "" }}</view>
      </view>
      <view class="coupon-footer-goods" v-if="pageName === 'goodsDetail' && showFooter">
        <view class="mb-8">商品规格：{{ coupon.productScopeDescription || "" }}</view>
      </view>
    </view>
    <van-dialog :title="openType === 1 ? '优惠劵可用店铺' : '优惠券可用次数'" :message="couponStore" confirmButtonText="知道了" :show="couponVisible" @confirm.stop="close" confirmButtonColor="#F0780E"></van-dialog>
  </view>
</template>

<script>
// 区分领券中心 和其他
import marketService from "@/api/market";
import util from "@/utils/common";

const couponTypeMap = {
  10: {
    label: ["部分店铺", "全部商品"],
    label2: [{ text: "限店铺", id: 1 }, { text: "全商品" }],
    value: 10,
  },
  20: {
    label: ["部分店铺", "部分商品"],
    label2: [{ text: "限店铺", id: 1 }, { text: "限商品" }],
    value: 20,
  },
  30: {
    label: ["部分店铺", "部分商品"],
    label2: [{ text: "限店铺", id: 1 }, { text: "限商品" }],
    value: 30,
  },
  40: { label: ["部分店铺", "部分商品"], label2: [{ text: "样品匹配商品" }], value: 40 },
  50: {
    label: ["全部店铺", "全部商品"],
    label2: [{ text: "全店铺" }, { text: "全商品" }],
    value: 50,
  },
  60: {
    label: ["部分店铺", "全部商品"],
    label2: [{ text: "限店铺", id: 1 }, { text: "全商品" }],
    value: 60,
  },
};

export default {
  props: {
    coupon: {
      type: Object,
      default: () => {},
      // required: true,
    },
    index: {
      type: [Number],
      default: 0,
    },
    // 0,全部， 1，简单
    pageType: {
      type: [Number, String],
      default: 0,
    },
    pageName: {
      type: [String],
    },
    showBtn: {
      type: Boolean,
      default: true,
    },
    statusFn: {
      type: Function,
    },
    countDown: Number,
  },
  data() {
    return {
      // src: "",
      showFooter: false,
      showGoods: false,
      goods: [],
      categoryList: [],
      couponTypeMap,
      statusList: ["https://staticcdn.youliao.com/static/image/www_pc/goods/coupon/couponStatus_1.png", "https://staticcdn.youliao.com/static/image/www_pc/goods/coupon/couponStatus_2.png"],
      map: {
        disable: "https://staticcdn.youliao.com/static/image/www_m/member/disableBg.png",
        usable: "https://staticcdn.youliao.com/static/image/www_m/member/coupon_list_bg.png",
      },
      timeObj: null,
      couponStore: "",
      couponVisible: false,
      openType: 1,
    };
  },
  computed: {
    src() {
      if (this.statusFn) return this.map[this.statusFn(this.coupon)];
      const type = [30, 40, 50].includes(this.coupon.status) ? "disable" : "usable";
      return this.map[type];
    },
    ctnHeight() {
      return this.pageName === "goodsDetail" ? "216rpx" : "228rpx";
    },
  },
  watch: {
    countDown() {
      if (this.done) return;
      const { currentStatus, currentDate, beginDate, endDate } = this.coupon;
      const statusList = {
        10: { field: beginDate, text: "距开始" },
        20: { field: endDate, text: "距结束" },
      };

      if (!(currentStatus in statusList)) return;

      const { field, text } = statusList[currentStatus];
      const getCountDown = util.setCountDown(currentDate, field, this.countDown);
      !getCountDown && (this.done = true);
      this.timeObj = { ...getCountDown, text };
    },
  },
  methods: {
    getMoney({ type, deductName = 1, deductMoney = 1 }) {
      return type == 2 ? `${deductName}折` : deductMoney;
    },
    showMore() {
      this.showFooter = !this.showFooter;
    },
    fToUse(e) {
      const { couponTemplateId, id } = this.coupon;
      uni.navigateTo({
        url: `/pages-member/coupon/couponGoodsList?couponId=${id}&couponTemplateId=${couponTemplateId}`,
      });
    },
    async saveReceiveCoupon() {
      this.$emit("saveReceiveCoupon", this.coupon, this.index);
    },
    open(coupon, type) {
      this.openType = type;
      if (type === 1) {
        if (coupon.goodsScope === 50) return;
        this.couponStore = coupon.assignStoreNameStrs;
      } else {
        this.couponStore = coupon.useLimitTypeCount;
      }
      this.couponVisible = true;
    },
    close() {
      this.couponVisible = false;
      this.couponStore = "";
    },
  },

  mounted() {},
};
</script>

<style lang="scss" scoped>
.fs {
  &-12 {
    font-size: 24rpx;
  }
  &-16 {
    font-size: 32rpx;
  }
}
.c {
  &-24 {
    color: #242d4a;
  }
  &-26 {
    color: #262626;
  }
  &-4d {
    color: #4d546b;
  }
  &-8c {
    color: #8c8c8c;
  }
  &-91 {
    color: #9195a4;
  }
  &-30 {
    color: #306ef0;
  }
  &-red {
    color: #f5222d;
  }
}
.mb-2 {
  margin-bottom: 4rpx;
}
.mb-8 {
  margin-bottom: 16rpx;
}
.mt-16 {
  margin-top: 32rpx;
}
.coupon-store {
  display: inline-flex;
  align-items: center;
}
.coupon {
  width: 710rpx;
  position: relative;
  left: 20rpx;

  &-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 710rpx;
    height: 248rpx;
    z-index: 1;
  }
  &-content {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    position: relative;
    min-height: 248rpx;
    overflow: hidden;

    @extend .fs-12;
    &-left {
      width: 33%;
      flex-basis: 33%;
      color: #fff;
      padding-top: 57rpx;
      padding-bottom: 56rpx;
      text-align: center;
      &-discount {
        font-size: 48rpx;
      }
    }
    &-right {
      flex: 1;
      padding-left: 20rpx;
      width: calc(67% - 20rpx);
      @extend .c-8c;
      &-store {
        @extend .fs-16;
        @extend .c-26;
        font-weight: 700;
        margin-bottom: 12rpx;
        display: flex;
        align-items: center;

        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: calc(100% - 100rpx);
        }
        .scope {
          width: 76rpx;
          height: 28rpx;
          line-height: 28rpx;
          font-size: 20rpx;
          margin-right: 4rpx;
          text-align: center;
          border-radius: 4rpx;
          font-weight: 500;
          &-1 {
            color: #f0780e;
            background-image: linear-gradient(90deg, #ffeee4 4%, #ffe1c6 100%);
          }
          &-0 {
            color: #306ef0;
            background-image: linear-gradient(-47deg, #c7ddff 0%, #dce9ff 100%);
          }
        }
      }
      &-more {
        @extend .c-91;
        display: flex;
        align-items: center;
      }
      &-btn {
        position: absolute;
        right: 20rpx;
        width: 140rpx;
        height: 48rpx;
        border: 1px solid #f0780e;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        z-index: 2;
        top: 50%;
        transform: translateY(-50%);
        color: #f0780e;
        &.use {
          background-image: linear-gradient(142deg, #f79054 0%, #f0780e 100%);
          color: white;
        }
        &.centerPage {
          top: 85%;
        }
        &.disabled {
          background: #8c8c8c;
          color: #fff;
          border-color: #8c8c8c;
        }
      }
    }
  }

  .count-down {
    font-size: 20rpx;
    font-weight: 400;
    color: #888;
    margin-left: 10rpx;
  }

  &-footer-goods {
    border-top: 1px dashed #e6e6e6;
    border-radius: 0px 0px 6px 6px;
    background: #ffffff;
    padding: 24rpx 28rpx;
    box-sizing: border-box;
    color: #333333;
  }
  &-footer {
    background: #fff;
    min-height: 180rpx;
    border-top: 1px dashed #e6e6e6;
    border-radius: 0px 0px 6px 6px;
    padding: 24rpx 28rpx;
    word-break: break-all;
    @extend .c-4d;
    font-size: 24rpx;
    box-sizing: border-box;
  }

  &-goods {
    height: 1000rpx;
    &-title {
      @extend .c-24;
      @extend .fs-16;
      font-weight: 700;

      height: 110rpx;
      line-height: 110rpx;
      border-bottom: 1px #ececec solid;
      font-weight: 500;
      padding-left: 20rpx;
    }
    &-body {
      border-bottom: 1px #ececec solid;
      padding: 20rpx 30rpx;
      &:nth-last-child(1) {
        border-bottom: none;
      }
      &:first-child {
        padding-top: 0;
      }
    }
    &-name {
      @extend .c-24;
      @extend .fs-16;
      padding-bottom: 20rpx;
    }

    &-info {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      @extend .fs-12;
      @extend .c-91;
      &-item {
        flex-basis: 33%;
        margin-bottom: 12rpx;
      }
    }
  }
}
.tags {
  width: 104rpx;
  height: 104rpx;
  display: block;
  position: absolute;
  top: -20rpx;
  right: 36rpx;
  z-index: 2;
}
.stamp-img {
  position: absolute;
  top: 20rpx;
  right: 12rpx;
  z-index: 1;
  width: 127rpx;
  height: 110rpx;
}
</style>
